/*-------------------------------------------------------------- # General --------------------------------------------------------------*/
 body {
     font-family: "Open Sans", sans-serif;
     color: #444444;
         background: #fefdeb;
}
#main 
{
        background: #fff;
}
 a {
     color: #85b0be;
     text-decoration: none;
}
 a:hover {
     color: #a6c6d0;
     text-decoration: none;
}
 h1, h2, h3, h4, h5, h6 {
     font-family: "Raleway", sans-serif;
}
/*-------------------------------------------------------------- # Back to top button --------------------------------------------------------------*/
 .back-to-top {
     position: fixed;
     visibility: hidden;
     opacity: 0;
     right: 15px;
     bottom: 15px;
     z-index: 996;
     background: #25d366;
     width: 40px;
     height: 40px;
     border-radius: 4px;
     transition: all 0.4s;
}
 .back-to-top i {
     font-size: 28px;
     color: #fff;
     line-height: 0;
}
 .back-to-top:hover {
     background: #25d366;
     color: #fff;
}
 .back-to-top.active {
     visibility: visible;
     opacity: 1;
}
/*-------------------------------------------------------------- # Header --------------------------------------------------------------*/
 #header {
     z-index: 997;
     transition: all 0.5s;
     background: #052c3f;
     padding: 22px 0;
}
 #header.header-transparent {
     background: rgba(5, 44, 63, 0.5);
}
 #header.header-scrolled {
     background: rgba(5, 44, 63, 0.8);
     padding: 12px 0;
}
 #header .logo h1 {
     font-size: 36px;
     margin: 0;
     padding: 0;
     line-height: 1;
     font-weight: 400;
     letter-spacing: 3px;
     text-transform: uppercase;
}
 #header .logo h1 a, #header .logo h1 a:hover {
     color: #fff;
     text-decoration: none;
}
 #header .logo img {
     padding: 0;
     margin: 0;
     max-height: 40px;
}
 @media (max-width: 768px) {
     #header .logo h1 {
         font-size: 28px;
    }
}
/*-------------------------------------------------------------- # Navigation Menu --------------------------------------------------------------*/
/** * Desktop Navigation */
 .navbar {
     padding: 0;
}
 .navbar ul {
     margin: 0;
     padding: 0;
     display: flex;
     list-style: none;
     align-items: center;
}
 .navbar li {
     position: relative;
}
 .navbar a, .navbar a:focus {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 10px 0 10px 30px;
     font-family: "Poppins", sans-serif;
     font-size: 14px;
     font-weight: 500;
     color: #fff;
     white-space: nowrap;
     text-transform: uppercase;
     transition: 0.3s;
}
 .navbar a i, .navbar a:focus i {
     font-size: 12px;
     line-height: 0;
     margin-left: 5px;
}
 .navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover>a {
     color: #85b0be;
}
 .navbar .dropdown ul {
     display: block;
     position: absolute;
     left: 14px;
     top: calc(100% + 30px);
     margin: 0;
     padding: 10px 0;
     z-index: 99;
     opacity: 0;
     visibility: hidden;
     background: #fff;
     box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
     transition: 0.3s;
}
 .navbar .dropdown ul li {
     min-width: 200px;
}
 .navbar .dropdown ul a {
     padding: 10px 20px;
     font-size: 14px;
     text-transform: none;
     font-weight: 500;
     color: #3b626f;
}
 .navbar .dropdown ul a i {
     font-size: 12px;
}
 .navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover>a {
     color: #85b0be;
}
 .navbar .dropdown:hover>ul {
     opacity: 1;
     top: 100%;
     visibility: visible;
}
 .navbar .dropdown .dropdown ul {
     top: 0;
     left: calc(100% - 30px);
     visibility: hidden;
}
 .navbar .dropdown .dropdown:hover>ul {
     opacity: 1;
     top: 0;
     left: 100%;
     visibility: visible;
}
 @media (max-width: 1366px) {
     .navbar .dropdown .dropdown ul {
         left: -90%;
    }
     .navbar .dropdown .dropdown:hover>ul {
         left: -100%;
    }
}
/** * Mobile Navigation */
 .mobile-nav-toggle {
     color: #fff;
     font-size: 28px;
     cursor: pointer;
     display: none;
     line-height: 0;
     transition: 0.5s;
}
 @media (max-width: 991px) {
     .mobile-nav-toggle {
         display: block;
    }
     .navbar ul {
         display: none;
    }
}
 .navbar-mobile {
     position: fixed;
     overflow: hidden;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
     background: rgba(1, 11, 16, 0.9);
     transition: 0.3s;
     z-index: 999;
}
 .navbar-mobile .mobile-nav-toggle {
     position: absolute;
     top: 15px;
     right: 15px;
}
 .navbar-mobile ul {
     display: block;
     position: absolute;
     top: 55px;
     right: 15px;
     bottom: 15px;
     left: 15px;
     padding: 10px 0;
     background-color: #fff;
     overflow-y: auto;
     transition: 0.3s;
}
 .navbar-mobile a, .navbar-mobile a:focus {
     padding: 10px 20px;
     font-size: 15px;
     color: #052c3f;
}
 .navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover>a {
     color: #85b0be;
}
 .navbar-mobile .getstarted, .navbar-mobile .getstarted:focus {
     margin: 15px;
}
 .navbar-mobile .dropdown ul {
     position: static;
     display: none;
     margin: 10px 20px;
     padding: 10px 0;
     z-index: 99;
     opacity: 1;
     visibility: visible;
     background: #fff;
     box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}
 .navbar-mobile .dropdown ul li {
     min-width: 200px;
}
 .navbar-mobile .dropdown ul a {
     padding: 10px 20px;
}
 .navbar-mobile .dropdown ul a i {
     font-size: 12px;
}
 .navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover>a {
     color: #85b0be;
}
 .navbar-mobile .dropdown>.dropdown-active {
     display: block;
}
/*-------------------------------------------------------------- # Hero Section --------------------------------------------------------------*/
/* Hero Section */
#hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fffbea; /* light background */
  padding: 80px 10%;
  min-height: 600px;
  flex-wrap: wrap; /* allows stacking on smaller screens */
}

/* Left Content */
.hero-content {
  max-width: 50%;
}

.hero-content h1 {
  font-size: 48px;
  font-weight: 700;
  color: #0d254a;
  line-height: 1.2;
}

.hero-content p {
  font-size: 20px;
  color: #2c3e50;
  margin: 20px 0;
}

.hero-content .btn {
  display: inline-block;
  background: #0d254a;
  color: #fff;
  padding: 14px 32px;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
}

.hero-content .btn:hover {
  background: #1a3765;
}

/* Right Image */
.hero-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-image img {
  max-width: 350px;
  width: 100%;
  height: auto;
}

/* Responsive */
@media (max-width: 992px) {
  #hero {
    flex-direction: column;
    text-align: center;
    padding: 90px 5%;
    min-height: auto;
  }

  .hero-content {
    max-width: 100%;
    margin-bottom: 30px;
  }

  .hero-content h1 {
    font-size: 36px;
  }

  .hero-content p {
    font-size: 18px;
  }

  .hero-image img {
    max-width: 280px;
  }
}

@media (max-width: 576px) {
  .hero-content h1 {
    font-size: 28px;
  }

  .hero-content p {
    font-size: 16px;
  }

  .hero-content .btn {
    padding: 12px 24px;
    font-size: 14px;
  }

  .hero-image img {
    max-width: 220px;
  }
}


/*-------------------------------------------------------------- # Sections General --------------------------------------------------------------*/
 section {
     padding: 80px 0;
     overflow: hidden;
}
 .section-bg {
     background-color: #f6f9fa;
}
 .section-title {
     text-align: center;
     padding-bottom: 30px;
}
 .section-title h2 {
     font-size: 36px;
     font-weight: 700;
     text-transform: uppercase;
     margin-bottom: 20px;
     padding-bottom: 0;
     color: #052c3f;
}
 .section-title p {
     margin-bottom: 0;
}
/*-------------------------------------------------------------- # About --------------------------------------------------------------*/
 .about .content h2 {
     font-weight: 700;
     font-size: 48px;
     line-height: 60px;
     margin-bottom: 20px;
     text-transform: uppercase;
     color: #052c3f;
}
 .about .content h3 {
     font-weight: 500;
     line-height: 32px;
     font-size: 24px;
     color: #4d8090;
}
 .about .content ul {
     list-style: none;
     padding: 0;
}
 .about .content ul li {
     padding: 10px 0 0 28px;
     position: relative;
}
 .about .content ul i {
     left: 0;
     top: 7px;
     position: absolute;
     font-size: 20px;
     color: #85b0be;
}
 .about .content p:last-child {
     margin-bottom: 0;
}
 #about-product {
     padding: 40px 0;
}
 .container {
     max-width: 1140px;
     margin: 0 auto;
     padding: 0 15px;
}
 .section-title {
     font-size: 24px;
     font-weight: bold;
     margin-bottom: 30px;
}
 .product-grid {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
}
 .product-card {
     flex: 1 1 300px;
   
     border-radius: 8px;
     padding: 16px;
     display: flex;
     gap: 15px;
     align-items: center;
     background-color: #fff;
}
 .product-image {
     width: 130px;
     height: 130px;
     background-color: #ddd;
     border-radius: 4px;
     flex-shrink: 0;
}
 .product-info {
     flex: 1;
     padding-top: 40px;
}
 .product-title {
     margin: 0;
     font-size: 18px;
}
 .product-description {
     margin: 4px 0 8px;
     color: #666;
     font-size: 14px;
}
 .order-button {
     padding: 6px 12px;
     background-color: #333;
     color: #fff;
     border: none;
     border-radius: 4px;
     cursor: pointer;
}
 .order-button:hover {
     background-color: #000;
}
 .circle-img {
     width: 300px;
     height: 300px;
     object-fit: cover;
     border-radius: 50%;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/*-------------------------------------------------------------- # Services --------------------------------------------------------------*/
 .services {
     padding-bottom: 40px;
}
 .services .icon-box {
     margin-bottom: 40px;
}
 .services .icon {
     float: left;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 72px;
     height: 72px;
     border-radius: 50%;
     transition: 0.5s;
     border: 2px solid #85b0be;
}
 .services .icon i {
     color: #649aac;
     font-size: 24px;
     line-height: 0;
}
 .services .title {
     margin-left: 90px;
     font-weight: 700;
     margin-bottom: 15px;
     font-size: 18px;
}
 .services .title a {
     color: #052c3f;
     transition: 0.3s;
}
 .services .description {
     margin-left: 90px;
     line-height: 24px;
     font-size: 14px;
}
 .services .icon-box:hover .icon {
     background: #85b0be;
}
 .services .icon-box:hover .icon i {
     color: #fff;
}
 .services .icon-box:hover .title a {
     color: #85b0be;
}
/*-------------------------------------------------------------- # feature --------------------------------------------------------------*/
section#featured {
    padding: 0px 0px;
}

.featured img {
    margin: auto;
    width: 50%;
    border-radius: 0;
}
 
 .featured .card {
     border: 0;
     text-align: ceneter;
}
 .featured .card-body {
     -moz-text-align-last: center;
     text-align-last: center;
}
 .featured .card-title a {
     font-weight: 600;
     font-size: 18px;
     color: #052c3f;
}
 .featured .btn {
     border-radius: 4px;
     padding: 4px 30px 6px 30px;
     border: 2px solid #85b0be;
     color: #85b0be;
     font-weight: 500;
}
 .featured .btn:hover {
     background-color: #85b0be;
     color: #fff;
}
/*-------------------------------------------------------------- # how to use --------------------------------------------------------------*/
 .how-to-use {
     padding: 40px 20px;
     background-color: #f9f9f9;
}
 .section-title h2 {
     text-align: center;
     font-size: 24px;
     margin-bottom: 30px;
     font-weight: bold;
}
 .con1 {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 20px;
}
 .step {
     background: #fff;
     border-radius: 12px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     
     width: 100%;
     max-width: 250px;
     text-align: center;
     transition: transform 0.3s ease;
}
 .step:hover {
     transform: translateY(-5px);
}
 .step-number {
     background-color:rgba(5, 44, 63, 0.8);
     color: white;
     font-size: 22px;
     font-weight: bold;
     width: 40px;
     height: 40px;
     margin: 0 auto 15px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .step-title .highlight {
     font-size: 16px;
     font-weight: 600;
     color:#00b3b3;
     display: block;
     margin-bottom: 10px;
}
 .step-description {
     font-size: 14px;
     color: #666;
     line-height: 1.5;
}
/* ✅ Responsive: Mobile View */
 @media screen and (max-width: 768px) {
     .step {
         width: 100%;
         max-width: 100%;
    }
     .step-number {
         font-size: 20px;
         width: 35px;
         height: 35px;
    }
     .step-title .highlight {
         font-size: 15px;
    }
     .step-description {
         font-size: 13px;
    }
}
/*-------------------------------------------------------------- # social-sec --------------------------------------------------------------*/
 .social-sec {
     padding: 0px 0px !important;
}
 .timeline {
     position: relative;
     margin: auto;
}
 .box {
     padding: 20px;
     width: 50%;
     position: relative;
}
 .left {
     float: left;
     text-align: right;
}
 .right {
     float: right;
     text-align: left;
}
 .left::before {
     right: -10px;
}
 .right::before {
     left: -10px;
}
 .content {
     padding: 20px;
     background-color: #ffffff;
     border-radius: 6px;
     box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
 .insta {
     border-left: 5px solid #E1306C;
}
 .youtu {
     border-left: 5px solid #FF0000;
}
 .youtu {
     border-left: 5px solid #FF0000;
     width: 80% !important;
}
/* Responsive */
 @media screen and (max-width: 768px) {
     .timeline::after {
         left: 20px;
    }
     .box {
         width: 100%;
         padding-left: 60px;
         padding-right: 25px;
         text-align: left;
    }
     .left, .right {
         float: none;
    }
     .box::before {
         left: 15px;
    }
}
/*-------------------------------------------------------------- # Contact --------------------------------------------------------------*/
 .contact .info-wrap {
     box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
     padding: 30px;
     background: #fff;
}
 .contact .info i {
     font-size: 20px;
     color: #85b0be;
     float: left;
     width: 44px;
     height: 44px;
     background: white;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 50px;
     transition: all 0.3s ease-in-out;
}
 .contact .info h4 {
     padding: 0 0 0 60px;
     font-size: 22px;
     font-weight: 600;
     margin-bottom: 5px;
     color: #052c3f;
}
 .contact .info p {
     padding: 0 0 0 60px;
     margin-bottom: 0;
     font-size: 14px;
     color: #0d6e9e;
}
 .contact .info:hover i {
     background: #85b0be;
     color: #fff;
}
 .contact .php-email-form {
     width: 100%;
     box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12);
     padding: 30px;
     background: #fff;
}
 .contact .php-email-form .form-group {
     padding-bottom: 8px;
}
 .contact .php-email-form .validate {
     display: none;
     color: red;
     margin: 0 0 15px 0;
     font-weight: 400;
     font-size: 13px;
}
 .contact .php-email-form .error-message {
     display: none;
     color: #fff;
     background: #ed3c0d;
     text-align: left;
     padding: 15px;
     font-weight: 600;
}
 .contact .php-email-form .error-message br+br {
     margin-top: 25px;
}
 .contact .php-email-form .sent-message {
     display: none;
     color: #fff;
     background: #18d26e;
     text-align: center;
     padding: 15px;
     font-weight: 600;
}
 .contact .php-email-form .loading {
     display: none;
     background: #fff;
     text-align: center;
     padding: 15px;
}
 .contact .php-email-form .loading:before {
     content: "";
     display: inline-block;
     border-radius: 50%;
     width: 24px;
     height: 24px;
     margin: 0 10px -6px 0;
     border: 3px solid #18d26e;
     border-top-color: #eee;
     animation: animate-loading 1s linear infinite;
}
 .contact .php-email-form input, .contact .php-email-form textarea {
     border-radius: 0;
     box-shadow: none;
     font-size: 14px;
}
 .contact .php-email-form input:focus, .contact .php-email-form textarea:focus {
     border-color: #85b0be;
}
 .contact .php-email-form input {
     height: 44px;
}
 .contact .php-email-form textarea {
     padding: 10px 12px;
}
 .contact .php-email-form button[type=submit] {
     background: #85b0be;
     border: 0;
     padding: 10px 24px;
     color: #fff;
     transition: 0.4s;
     border-radius: 4px;
}
 .contact .php-email-form button[type=submit]:hover {
     background: #6a9fb0;
}
 @keyframes animate-loading {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}
/*-------------------------------------------------------------- # Footer --------------------------------------------------------------*/
 #footer {
     background: url("./footer-bg.jpg") top center no-repeat;
     color: #fff;
     font-size: 14px;
     position: relative;
}
 #footer::before {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     background: rgba(1, 11, 16, 0.6);
     z-index: 1;
}
 #footer .footer-top {
     position: relative;
     z-index: 2;
     text-align: center;
     padding: 80px 0;
}
 #footer .footer-top h3 {
     font-size: 36px;
     font-weight: 700;
     color: #fff;
     position: relative;
     font-family: "Poppins", sans-serif;
     padding-bottom: 0;
     margin-bottom: 0;
}
 #footer .footer-top p {
     font-size: 15;
     font-style: italic;
     margin: 30px 0 0 0;
     padding: 0;
}
 #footer .footer-top .footer-newsletter {
     text-align: center;
     font-size: 15px;
     margin-top: 30px;
}
 #footer .footer-top .footer-newsletter form {
     background: #fff;
     padding: 6px 10px 6px 8px;
     position: relative;
     border-radius: 4px;
     box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
     text-align: left;
}
 #footer .footer-top .footer-newsletter form input[type=email] {
     border: 0;
     padding: 4px 8px;
     width: calc(100% - 100px);
}
 #footer .footer-top .footer-newsletter form input[type=submit] {
     position: absolute;
     top: 0;
     right: -1px;
     bottom: 0;
     border: 0;
     background: none;
     font-size: 16px;
     padding: 0 20px;
     background: #85b0be;
     color: #fff;
     transition: 0.3s;
     border-radius: 0 4px 4px 0;
     box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}
 #footer .footer-top .footer-newsletter form input[type=submit]:hover {
     background: #6a9fb0;
}
 #footer .footer-top .social-links {
     margin-top: 30px;
}
 #footer .footer-top .social-links a {
     font-size: 18px;
     display: inline-block;
     background: #85b0be;
     color: #fff;
     line-height: 1;
     padding: 8px 0;
     margin-right: 4px;
     border-radius: 50%;
     text-align: center;
     width: 36px;
     height: 36px;
     transition: 0.3s;
}
 #footer .footer-top .social-links a:hover {
     background: #649aac;
     color: #fff;
     text-decoration: none;
}
 #footer .footer-bottom {
     z-index: 2;
     position: relative;
     padding-bottom: 40px;
     text-align: center;
}
 #footer .credits {
     text-align: center;
     font-size: 13px;
}